import React, { useState, useEffect } from 'react';
import { Layout, Menu, Button, Typography } from 'antd';
import { Link, useNavigate } from 'react-router-dom';
import logo from '../../assets/cbe769a523095d18c6c11252415cc065.jpg'; // 假设 logo 图片在当前目录下
import { Routes, Route,Outlet } from 'react-router-dom';

const { Header, Content, Sider } = Layout;
const { Text } = Typography;

const AdminBookMg = () => {
  const [currentTime, setCurrentTime] = useState(new Date());
  const [selectedKey, setSelectedKey] = useState('1');
  const navigate = useNavigate();

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date());
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  const handleLogout = () => {
    navigate('/login'); // 导航到登录页面
  };

  const menuItems = [
    {
      key: 'adminInfo',
      label: '管理员明细',
    },
    {
      key: 'userMg',
      label: '用户管理',
    },
    {
      key: 'bookMg',
      label: '图书管理',
    },
    {
      key: 'borrowBookList',
      label: '借阅书籍列表',
    },
  ];

  return (
    <Layout>
      <Header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center',backgroundColor: '#ebe8e7' }}>
        <div>
          <img src={logo} alt="图书管理系统logo" style={{ height: '40px' }} />
        </div>
        <Text>{currentTime.toLocaleString()}</Text>
        <div>
          <Text>欢迎，管理员名字</Text>
          <Button style={{ marginLeft: '16px' }} onClick={handleLogout}>退出</Button>
        </div>
      </Header>
      <Layout  >
        <Sider width={200} style={{ backgroundColor:'#ebe8e7', padding: '24px',borderRadius: '8px'} }>
          <Menu
            mode="inline"
            selectedKeys={[selectedKey]}
            onSelect={({ key }) => setSelectedKey(key)}
            style={{ backgroundColor:'#ebe8e7',border: 'none'}}
            defaultSelectedKeys={['adminInfo']}
          >
            {menuItems.map(item => (
              <Menu.Item key={item.key}>
                <Link to={`${item.key}`}>{item.label}</Link>
              </Menu.Item>
            ))}
          </Menu>
        </Sider>
        <Layout style={{ padding: '24px',backgroundColor:'#ebe8e7' }}>
          <Content style={{ background: '#fff', padding: 24, minHeight: 280,borderRadius: '8px' }}>
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default AdminBookMg;